<template>
  <div class="Team">
    <img src="/static/img/btn_back.png" alt="btn" class="btn" @click="onNavToBack">
    <div class="main">
		<dl>
    		<dt>{{ team.name }}<img src="/static/img/p2_icon1.png" class="icon" alt="icon"></dt>
    		<dd v-html="team.content"></dd>
    	</dl>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Team',
  data() {
    return {
      team: {}
    }
  },
  created() {
    this.$http.get('/team/' + this.$route.params.team_id).then(({data}) => {
      this.team = data.data
    });
  },
  methods: {
    onNavToBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.Team {
  @include bg('/static/img/bg.png');
  display: flex;
  flex-direction: column;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    width: 20%;
    margin: 10px;
  }
  .main {
  	padding: 0 20px;
  	font-size: 14px;
  	dl {
  		dt {
			background: white;
			border-radius: 6px;
			padding: 10px;
			text-align: center;
			margin-bottom: 10px;
			font-weight: bold;
			box-shadow: 1px 1px 5px #999;
			position: relative;
			.icon {
				position: absolute;
				width: 15%;
				top: -20px;
				right: 5px;
			}
  		}
  		dd {
			@extend dt;
			margin-bottom: 20px;
			text-align: justify;
			font-weight: normal;
  		}
  	}
  }
}
</style>
